<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>上传图片</title>
</head>
<body>
<div id="app">
    <div class="div-center-class">
        <el-upload
                class="upload-demo"
                action="#"
                drag
                :http-request="httpRequestHandle"
        >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        <div v-if="imgUrl">
            <img :src="imgUrl"></img>
        </div>
    </div>
</div>
</body>
<!-- import Vue before Element -->
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!--import  axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                imgUrl: ''
            }
        },
        methods: {
            getpolicy(file) {
                _that = this
                axios.get('http://localhost:8080/common/getOssPolicy')
                    .then(function (response) {
                        let {AccessKeyId, policy, signature, host, callback} = response.data;
                        let formData = new FormData();
                        formData.append("key", `${new Date().getTime()}_${file.name}`);
                        formData.append("success_action_status", 200);  // 让服务端返回200，不设置则默认返回204。
                        formData.append("OssAccessKeyId", AccessKeyId);
                        formData.append("policy", policy);
                        formData.append("signature", signature);
                        formData.append("callback", callback);
                        formData.append("file", file); // 必须放在最后
                        // 发送 POST 请求
                        _that.axiosPost("post", host, formData).then(function (res) {
                            _that.imgUrl = res
                        })
                    })
            },
            httpRequestHandle(options) {
                let {file} = options;
                this.getpolicy(file);
            },
            //封装
            //axios封装post请求
            axiosPost(method, url, data) {
                let result = axios({
                    method: method,
                    url: url,
                    data: data
                }).then(resp => {
                    return resp.data.data;
                }).catch(error => {
                    return "exception=" + error;
                });
                return result;
            }
        }
    })
</script>
<style>
    .div-center-class {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
</style>
</html>